import React, { useState, useEffect } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history as Router, withRouter } from 'umi'
import { Switch } from 'react-router'
import './index.less'

const routerType = {
  'POP': 'back',
  'PUSH': 'in',
  'REPLACE': 'in'
}

export default withRouter(({ location, children, history }) => {
  return (
    <TransitionGroup style={{ height: '100%' }} className='transition_wrapper' childFactory={(child) => (
      React.cloneElement(child, { classNames: routerType[history.action] })
    )}>
      <CSSTransition key={location.pathname} appear timeout={3000}>
        <Switch location={location}>{(children as any)?.props?.children}</Switch>
      </CSSTransition>
    </TransitionGroup>
  )
})
